<template>
  <van-nav-bar title="添加请假信息" left-text="返回" left-arrow @click-left="$router.back()" />
  <div>
    <van-form @failed="onFailed">
      <van-field v-model="formData.teacherName" is-link readonly name="picker" label="辅导员" placeholder="请选择辅导员"
        @click="showTeacher = true" />
      <van-popup v-model:show="showTeacher" position="bottom">
        <van-picker :columns="teachers" @confirm="onConfirmTeacher" @cancel="showTeacher = false"
          :columns-field-names="{ text: 'teacherName', value: 'teacherId' }" />
      </van-popup>

      <van-field v-model="formData.typeName" is-link readonly name="picker" label="请假类型" placeholder="请假类型"
        @click="showType = true" />
      <van-popup v-model:show="showType" position="bottom">
        <van-picker :columns="types" @confirm="onConfirmType" @cancel="showType = false"
          :columns-field-names="{ text: 'typeName', value: 'id' }" />
      </van-popup>

      <!-- <van-field name="uploader" label="请假图片">
        <template #input>
          <van-uploader v-model="formData.images2" />
        </template>
      </van-field> -->
      <van-field v-model="formData.beginTime" is-link readonly name="calendar" label="起始时间" placeholder="点击选择日期"
        @click="showCalendar1 = true" />
      <van-calendar v-model:show="showCalendar1" @confirm="onConfirmStart" />

      <van-field v-model="formData.endTime" is-link readonly name="calendar" label="结束时间" placeholder="点击选择日期"
        @click="showCalendar2 = true" :rules="[{ validator, message: '请假原因必填' }]" />
      <van-calendar v-model:show="showCalendar2" @confirm="onConfirmEnd" />

      <van-cell-group>
        <van-field v-model="formData.instructions" rows="2" autosize label="请假原因" type="textarea" maxlength="50"
          placeholder="请输入留言" show-word-limit :rules="[{ validator, message: '请假原因必填' }]" />
      </van-cell-group>

      <van-button round block type="primary" native-type="submit" @click="addLeave">
        添加
      </van-button>
    </van-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import request from '@/utils/request'
import { useRouter } from 'vue-router';
import { showNotify } from 'vant';

const router = useRouter();

const formData = reactive({
  teacherId: -1,
  teacherName: '',
  instructions: '有事需要外出',
  images2: [],
  type: '',
  status: 0,
  beginTime: '',
  endTime: ''
})

const showTeacher = ref(false);
const showType = ref(false);
const showCalendar1 = ref(false);
const showCalendar2 = ref(false);


let teachers = [ ];
let types = [ ];

const validator = (str) => {
  return str.trim().length > 0
}

const onConfirmTeacher = ({ selectedOptions }) => {
  formData.teacherId = selectedOptions[0]?.teacherId;
  formData.teacherName = selectedOptions[0]?.teacherName;
  showTeacher.value = false;
};
const onConfirmType = ({ selectedOptions }) => {
  formData.typeName = selectedOptions[0]?.typeName;
  formData.type = selectedOptions[0]?.id;
  showType.value = false;
};

const onConfirmStart = (date) => {
  formData.beginTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  showCalendar1.value = false;
};
const onConfirmEnd = (date) => {
  formData.endTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  showCalendar2.value = false;
};

const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};

// 异步更新数据
request.post("/wx/student/leave/teacher/list", formData).then(resp => {
  if (resp.data.code == 0) {
    teachers = resp.data.rows;
  }
});


request.post("/wx/student/leave/type/list", formData).then(resp => {
  if (resp.data.code == 0) {
    types = resp.data.rows;
  }
});

const addLeave = () => {
  // 异步更新数据
  request.post("/wx/student/leave/add", formData).then(resp => {
    if (resp.data.code == 0) {
      router.push('/leave');
    } else {
      showNotify("添加失败");
      console.log(resp.data.msg);
    }
  });
};
</script>
